// Modal.vue
<template>
    <BasicModal v-bind="$attrs" @register="registerModal" :title="displayModuleTitle" @ok="onButtonClickConfirm"
        :body-style="bodyStyle" width="900px">
        <BasicTable @register="registerTable" :canResize="true" :rowSelection="rowSelection" rowKey='stcd'
            :dataSource="tableData">
        </BasicTable>
        <div style="margin:10px"><span style="font-size: 15px;margin-right:15px">交换方向:</span><a-checkbox-group
                v-model:value="direction" :options="plainOptions" /></div>
    </BasicModal>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, unref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { displayTitle } from '/@/utils/QcUnifyUtil';
import { QcUnifyTransToChildProps } from '/#/QcUnify';
import { ExchangeCategoryStationResult, ExchangeStationDto } from '/@/api/qms/model/exchangeChannelModel';
import { setCategoryStations, getCategoryStations } from '/@/api/qms/exchangeChannel';
import { stationConnectTableColumns } from './exchangeStation.data'
import { useMessage } from '/@/hooks/web/useMessage';
import { BasicTable, useTable } from '/@/components/Table';
import { notification } from 'ant-design-vue';
import { t } from '/@/hooks/web/useI18n';

export default defineComponent({
    components: { BasicModal, BasicTable },
    name: 'setStationsModal',
    emits: ['success'],
    setup(_, { emit }) {
        const qcUnifyProps = ref<QcUnifyTransToChildProps>();
        const categoryId = ref();
        const direction = ref<Number[]>([]);
        const plainOptions = [
            {
                label: '数据入',
                value: 1
            },
            {
                label: '数据出',
                value: 2
            }
        ]
        const tableData = ref<ExchangeStationDto[]>([]);
        const bodyStyle = {
            height: '400px',
        }
        const { createMessage } = useMessage();
        const [registerTable, { }] = useTable({
            title: '站点列表',
            columns: stationConnectTableColumns,
            ellipsis: true,
            clickToRowSelect: true,
            canResize: true,
            immediate: false,
            bordered: true,
            striped: false,
            showTableSetting: false,
            indexColumnProps: {
                width: 80
            },
        });
        const selectedRowKeys = ref<String[]>([]);
        const rowSelection = computed(() => {
            return {
                selectedRowKeys: unref(selectedRowKeys),
                type: 'checkbox',
                onChange: (key) => {
                    selectedRowKeys.value = key;
                    console.log(key, 'newval')
                }
            }
        })
        const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => {
            tableData.value = [];
            direction.value = [];
            selectedRowKeys.value = [];
            if (data != undefined && data != null) {
                let unrefData = unref(data);
                qcUnifyProps.value = unrefData;
                //接收父组件传递的数据
                if (unrefData?.dataId) {
                    categoryId.value = unrefData.dataId;
                }
                getCategoryConnectStations();
            }
        });
        let displayModuleTitle = computed(() => {
            return displayTitle(qcUnifyProps.value);
        });
        //获取分类关联的所有站点
        function getCategoryConnectStations() {
            getCategoryStations(categoryId.value).then((res: ExchangeCategoryStationResult) => {
                tableData.value = res.map(item => item.station);
                let stcds = res.filter(item => item.checked).map(item => {
                    return item.station.stcd;
                })
                selectedRowKeys.value = stcds;
                console.log(selectedRowKeys.value, 'stcd');

            })
                .catch((ex) => {
                    console.log('catch ', ex);
                    createMessage.error(ex.msg);
                });
        }
        /**
        * 点击确认按钮
        */
        async function onButtonClickConfirm() {
            let param = {
                id: categoryId.value,
                direction: 0,
                stcds: selectedRowKeys.value
            };
            if (!direction.value || direction.value.length < 1) param.direction = 0
            else param.direction = direction.value.reduce((result, curValue) => {
                return result | curValue;
            })
            console.log(param, 'param')
            // param.id = Number(param.id);
            // setModalProps({ confirmLoading: true });
            if (param.direction == 0) {
                notification.warn({
                    message: t('sys.api.errorTip'),
                    description:
                        "数据交换方向不能为空,请选择数据交换方向"
                });
                return;
            }
            try {
                //调用接口进行保存
                setCategoryStations(param)
                    .then((res) => {
                        if (!res || Object.keys(res).length == 0) {
                            createMessage.success('保存成功。', 2);
                        }
                        direction.value = [];
                        closeModal();
                        emit('success');
                    })
                    .catch((ex) => {
                        console.log('catch ', ex);
                        createMessage.error(ex.msg);
                    });
            } finally {
                setModalProps({ confirmLoading: false });
            }
        }
        return {
            registerModal,
            registerTable,
            bodyStyle,
            categoryId,
            closeModal,
            tableData,
            direction,
            plainOptions,
            rowSelection,
            getCategoryConnectStations,
            displayModuleTitle,
            onButtonClickConfirm
        };
    },
});
</script>